<script setup>
import { ref, computed, onMounted } from 'vue'
import ProductList from './components/ProductList.vue'
import ProductManager from './components/ProductManager.vue'
import OrderPage from './components/OrderPage.vue'
import OrderHistory from './components/OrderHistory.vue'
import AddressManager from './components/AddressManager.vue'
import LoginForm from './components/LoginForm.vue'
import RegisterForm from './components/RegisterForm.vue'

/**
 * 主应用组件
 * 负责整体页面布局、导航管理和组件路由
 * 
 * @author SimpleShop
 * @version 1.0
 */

// ==================== 响应式数据 ====================

/**
 * 当前显示的页面视图
 * 可选值：'welcome', 'products', 'product-manager', 'order', 'history', 'addresses', 'login', 'register'
 */
const currentView = ref('welcome')

/**
 * 当前登录用户信息
 */
const user = ref(null)

/**
 * 是否显示注册表单
 */
const showRegister = ref(false)

// ==================== 计算属性 ====================

/**
 * 用户登录状态
 * 根据user对象是否为空来判断
 */
const isLoggedIn = computed(() => {
  return user.value !== null
})

// ==================== 事件处理方法 ====================

/**
 * 处理登录成功事件
 * 保存用户信息并跳转到商品页面
 * 
 * @param {Object} loginData - 登录返回的数据
 */
const handleLoginSuccess = (loginData) => {
  user.value = loginData.user
  currentView.value = 'products'
}

/**
 * 处理订单提交成功事件
 * 显示成功提示并跳转到商品页面
 */
const handleOrderSuccess = () => {
  alert('订单提交成功！')
  currentView.value = 'products'
}

/**
 * 处理立即购买事件
 * 跳转到订单页面
 * 
 * @param {Object} product - 要购买的商品
 */
const handleBuyNow = (product) => {
  // 跳转到订单页面
  currentView.value = 'order'
  // 可以传递选中的商品信息
  console.log('立即购买:', product)
}

/**
 * 退出登录
 * 清除本地存储的用户信息和token
 */
const logout = () => {
  localStorage.removeItem('token')
  localStorage.removeItem('user')
  user.value = null
  currentView.value = 'welcome'
}

/**
 * 处理显示注册表单事件
 */
const handleShowRegister = () => {
  showRegister.value = true
  currentView.value = 'register'
}

/**
 * 处理注册成功事件
 */
const handleRegisterSuccess = () => {
  showRegister.value = false
  currentView.value = 'login'
}

// ==================== 生命周期方法 ====================

/**
 * 检查用户登录状态
 * 从localStorage中读取token和用户信息
 */
const checkAuthStatus = () => {
  const token = localStorage.getItem('token')
  const savedUser = localStorage.getItem('user')
  
  if (token && savedUser) {
    user.value = JSON.parse(savedUser)
    currentView.value = 'products'
  }
}

/**
 * 组件挂载时执行
 * 检查用户登录状态
 */
onMounted(() => {
  checkAuthStatus()
})
</script>

<template>
  <div id="app">
    <!-- 导航栏 -->
    <nav class="navbar">
      <div class="nav-brand">
        <h1>SimpleShop</h1>
      </div>
      <div class="nav-menu">
        <button @click="currentView = 'products'" class="nav-btn">商品</button>
        <button v-if="isLoggedIn" @click="currentView = 'product-manager'" class="nav-btn">商品管理</button>
        <button @click="currentView = 'order'" class="nav-btn">创建订单</button>
        <button @click="currentView = 'history'" class="nav-btn">订单历史</button>
        <button v-if="isLoggedIn" @click="currentView = 'addresses'" class="nav-btn">地址管理</button>
        <button v-if="!isLoggedIn" @click="currentView = 'login'" class="nav-btn">登录</button>
        <button v-else @click="logout" class="nav-btn">退出</button>
      </div>
    </nav>

    <!-- 主要内容区域 -->
    <main class="main-content">
      <!-- 商品列表页面 -->
      <ProductList 
        v-if="currentView === 'products'"
        @buy-now="handleBuyNow"
      />
      
      <!-- 商品管理页面 -->
      <ProductManager 
        v-if="currentView === 'product-manager'"
      />
      
      <!-- 创建订单页面 -->
      <OrderPage 
        v-if="currentView === 'order'"
        @order-success="handleOrderSuccess"
      />
      
      <!-- 订单历史页面 -->
      <OrderHistory 
        v-if="currentView === 'history'"
        @go-to-order="currentView = 'order'"
      />
      
      <!-- 地址管理页面 -->
      <AddressManager 
        v-if="currentView === 'addresses'"
      />
      
      <!-- 登录页面 -->
      <LoginForm 
        v-if="currentView === 'login' && !showRegister"
        @login-success="handleLoginSuccess"
        @show-register="handleShowRegister"
      />
      
      <!-- 注册页面 -->
      <RegisterForm 
        v-if="currentView === 'register' && showRegister"
        @register-success="handleRegisterSuccess"
        @show-login="() => { showRegister = false; currentView = 'login' }"
      />
      
      <!-- 欢迎页面 -->
      <div v-if="currentView === 'welcome'" class="welcome-page">
        <h2>欢迎来到 SimpleShop</h2>
        <p>这是一个简单的电商平台</p>
        <button @click="currentView = 'products'" class="welcome-btn">开始购物</button>
      </div>
    </main>
  </div>
</template>

<style>
/* 全局样式 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: 'Arial', sans-serif;
  background-color: #f5f5f5;
  color: #333;
}

#app {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* 导航栏样式 */
.navbar {
  background-color: #2c3e50;
  color: white;
  padding: 1rem 2rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.nav-brand h1 {
  font-size: 1.5rem;
  font-weight: bold;
}

.nav-menu {
  display: flex;
  gap: 1rem;
}

.nav-btn {
  background: none;
  border: none;
  color: white;
  padding: 0.5rem 1rem;
  cursor: pointer;
  border-radius: 4px;
  transition: background-color 0.3s;
}

.nav-btn:hover {
  background-color: rgba(255, 255, 255, 0.1);
}

/* 主要内容区域 */
.main-content {
  flex: 1;
  padding: 2rem;
}

/* 欢迎页面样式 */
.welcome-page {
  text-align: center;
  padding: 4rem 2rem;
}

.welcome-page h2 {
  font-size: 2.5rem;
  margin-bottom: 1rem;
  color: #2c3e50;
}

.welcome-page p {
  font-size: 1.2rem;
  color: #666;
  margin-bottom: 2rem;
}

.welcome-btn {
  padding: 1rem 2rem;
  background-color: #3498db;
  color: white;
  border: none;
  border-radius: 8px;
  font-size: 1.1rem;
  cursor: pointer;
  transition: background-color 0.3s;
}

.welcome-btn:hover {
  background-color: #2980b9;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .navbar {
    padding: 1rem;
    flex-direction: column;
    gap: 1rem;
  }
  
  .nav-menu {
    flex-wrap: wrap;
    justify-content: center;
  }
  
  .main-content {
    padding: 1rem;
  }
  
  .welcome-page {
    padding: 2rem 1rem;
  }
  
  .welcome-page h2 {
    font-size: 2rem;
  }
}
</style>
